import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { useStreamData } from "@/hooks/use-stream-data";
import { aiResumeSystemPrompt } from "@/lib/system-prompt";
import React, { useEffect } from "react";
import { platformCodes } from "../constants";

interface ResumeAIDialogProps {
  open: boolean;
  onClose: () => void;
  onBeforeGenerate: () => void;
  onGenerate: (data: string) => void;
}

const tags = [
  {
    label: "人工智能训练师",
    color: "bg-pink-200 text-pink-700 hover:bg-pink-300",
  },
  {
    label: "脚本推理训练师",
    color: "bg-orange-200 text-orange-700 hover:bg-orange-300",
  },
  {
    label: "数据标注员",
    color: "bg-yellow-200 text-yellow-700 hover:bg-yellow-300",
  },
  {
    label: "游戏美术设计师",
    color: "bg-green-200 text-green-700 hover:bg-green-300",
  },
  {
    label: "对话行为训练师",
    color: "bg-lime-200 text-lime-700 hover:bg-lime-300",
  },
  {
    label: "碳排放管理师",
    color: "bg-emerald-200 text-emerald-700 hover:bg-emerald-300",
  },
  { label: "动画渲染师", color: "bg-cyan-200 text-cyan-700 hover:bg-cyan-300" },
  { label: "航空乘务员", color: "bg-blue-200 text-blue-700 hover:bg-blue-300" },
  {
    label: "脚本美术设计师",
    color: "bg-purple-200 text-purple-700 hover:bg-purple-300",
  },
  {
    label: "临终关怀师",
    color: "bg-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-300",
  },
  {
    label: "电子竞技教练",
    color: "bg-gray-200 text-gray-700 hover:bg-gray-300",
  },
];

export default function ResumeAIDialog({
  open,
  onClose,
  onBeforeGenerate,
  onGenerate,
}: ResumeAIDialogProps) {
  const [input, setInput] = React.useState("");
  const [selected, setSelected] = React.useState(platformCodes[0]);
  const { data, chat } = useStreamData(selected);

  const handleTagClick = (tagLabel: string) => {
    setInput(input + (input ? "，" : "") + tagLabel);
  };

  const handleGenerate = () => {
    chat([
      { role: "system", content: aiResumeSystemPrompt },
      { role: "user", content: input },
    ]);
    onClose();
    onBeforeGenerate();
  };

  useEffect(() => {
    if (data) {
      onGenerate(data);
    }
  }, [data, onGenerate]);

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-xl">
        <DialogHeader>
          <div className="flex items-center gap-2">
            <span className="text-2xl">🌟</span>
            <DialogTitle className="text-xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
              AI RESUME
            </DialogTitle>
          </div>
        </DialogHeader>

        <div className="space-y-4">
          <p className="text-sm text-muted-foreground">
            请在下方输入您的简历要求，适当补充其他信息如基本信息、教育经历、工作经历、兴趣爱好、技能特长等
          </p>

          <Textarea
            placeholder="请输入简历要求..."
            value={input}
            onChange={(e) => setInput(e.target.value)}
            className="min-h-[96px] resize-none"
          />

          <div className="flex flex-wrap gap-2">
            {tags.map((tag) => (
              <Badge
                key={tag.label}
                variant="secondary"
                className={`cursor-pointer transition-colors ${tag.color}`}
                onClick={() => handleTagClick(tag.label)}
              >
                {tag.label}
              </Badge>
            ))}
          </div>

          <div className="flex justify-between gap-2">
            <Select value={selected} onValueChange={setSelected}>
              <SelectTrigger className="w-[200px]">
                <SelectValue placeholder="选择模型" />
              </SelectTrigger>
              <SelectContent>
                {platformCodes.map((code) => (
                  <SelectItem key={code} value={code}>
                    {code}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Button size="lg" onClick={handleGenerate}>
              生成
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}


